<template>
    <div>
        <div class="box">
            <div class="loginBox">
                <img src="../../img/firstimgsmall_03.gif" alt="">
                <div class="tabBox">
                    <a-tabs v-model:activeKey="activeKey">
                        <a-tab-pane key="1" tab="去登录">
                            <h4>系统登录</h4>
                            <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
                                autocomplete="off" @finish="login">
                                <a-form-item label="账户" name="user" :rules="[{ required: true, message: '请输入用户名!' }]">
                                    <a-input v-model:value="formState.user" placeholder='请输入用户名'
                                        style='width: 450px;' />
                                </a-form-item>

                                <a-form-item label="密码" name="pas" :rules="[{ required: true, message: '请输入密码!' }]">
                                    <a-input-password v-model:value="formState.pas" placeholder='请输入密码' />
                                </a-form-item>


                                <a-form-item :wrapper-col="{ offset: 6, span: 16 }">
                                    <a-button type="primary" html-type="submit" style='width:400px;height: 40px;'>登录
                                    </a-button>
                                </a-form-item>
                            </a-form>
                        </a-tab-pane>
                        <a-tab-pane key="2" tab="注册用户" >
        <h4>访客注册</h4> 
                        <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    @finish="sign"
  >
    <a-form-item
      label="账户"
      name="user"
      :rules="[{ required: true, message: '请输入用户名！' }]"
    >
      <a-input v-model:value="formState.user" />
    </a-form-item>

    <a-form-item
      label="密码"
      name="pas"
      :rules="[{ required: true, message: '请输入密码！' }]"
    >
      <a-input-password v-model:value="formState.pas"  style='width: 450px;'/>
    </a-form-item>

                      <a-form-item
      label="确认"
      name="ok"
      :rules="[{ required: true, message: '请再次输入密码!' }]"
    >
      <a-input-password v-model:value="formState.ok" />
    </a-form-item> 

                        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit" style='width:400px;height: 40px;'>注册</a-button>
    </a-form-item>
  </a-form>
    </a-tab-pane> 
                    </a-tabs>
                </div>

            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
// const request=require('../../utils/request.js')
import axios from 'axios'
interface FormState {
    user: string;
    pas: string;
    ok:string;
}
export default defineComponent({

    setup() {
        const formState = reactive<FormState>({
            user: '',
            pas: '',
            ok:'',
        });
        //登录接口
        const login = async (values: any) => {
            const res = await axios.post('/api/login', values)
            console.log('Success:', values);
            console.log(res, 'res.login')
        };
        //注册接口
        const sign=async(values:any)=>{
            const res=await axios.post('/api/sign',values)
            console.log(res,'res.sign')
        }
        return {
            activeKey: ref('1'),
            formState,
            login,
            sign
        };
    },

})
</script>
<style lang="scss">
.box {
    width: 100%;
    height: 100%;
    background: #e7eaee;
}

img {
    width: 50%;
    height: 100%;
}

.loginBox {
    width: 80%;
    height: 70%;
    background: #eee;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

h4 {
    font-size: 22px;
    margin: 80px 0 60px 60px;
}
</style>